<!-- 人名币支付 -->
<template>
  <div class="paycoin">
    <div class="app-header">
      <div class="left">
        <span class="back-icon"></span>
      </div>
      <img src="../../assets/navBar.png" alt="" width="10" class="navBtn" @click="backBtn">
      <x-header :left-options="{showBack: false}">订单页</x-header>
      <div class="right"></div>
    </div>
    <div style="padding: 0px 10px;margin-top:8px;">
      <div class="cell-group" style="border-radius: 10px;">
        <div class="cell">
          <div style="border-bottom: 1px dashed #efefef">
            <div class="left" style="width: 100px; float: left;">投资项目：</div>
            {{type}}
          </div>
        </div>
        <div class="cell">
          <div>
            <div class="left" style="width: 100px; float: left;">投资金额：</div>
            <input type="text" placeholder="请输入投资金额" v-model="money" style="background: #fff !important;width: 52%; display: inline-block;height: 25px; line-height: 25px;border-radius: 15px;border: 1px solid #d4d4d4;padding-left: 15px; outline: none;"
             disabled>
          </div>
        </div>
      </div>

      <div class="cell-group" style="border-radius: 10px;margin-top:8px;">
        <div style="height: 40px;line-height: 40px;color: #999;font-size: 14px;
        padding-left: 15px;border-bottom: 1px solid #efefef;">
          请选择支付方式
        </div>
        <div class="cell">
          <div style="position: relative;border-bottom: 1px dashed #efefef;width: 100%;">
            <div class="left">
              <div class="icon-w-fix">
                <i class="purse-icon"></i>
              </div>
              <span>余额支付</span>
              <span style="font-size: 13px;color: #ff1010" v-if="showBanlance">(您的余额为{{typebalance}}{{type}},不足于支付)</span>
              <span style="font-size: 13px;color: #ccc" v-if="!showBanlance">(您的余额为{{typebalance}}{{type}})</span>
            </div>
            <!-- 余额足 -->
            <div class="right" style="position: absolute;right: 0px;top: 10px" v-if="!showBanlance">
              <i class="radio-icon" :class="{active: radioFlags0}" @click="radioIcon(0)"></i>
            </div>
            <!-- 余额不足 -->
            <div class="right" style="position: absolute;right: 0px;top: 10px" v-if="showBanlance">
              <i class="radio-icon"></i>
            </div>
          </div>
        </div>
        <div class="cell">
          <div class="left">
            <div class="icon-w-fix">
              <img src="../../assets/zfWallet.png" alt="" width="22">
            </div>
            <span>钱包支付</span>
          </div>
          <div class="right">
            <i class="radio-icon" :class="{active: radioFlags1}" @click="radioIcon(1)"></i>
          </div>
        </div>
      </div>
      <div class="app-bot-btn" @click="confimPay">
        <span style="font-size: 18px;">立即投资</span>
      </div>
      <div class="agree-wrap">
        <span>
          <i class="radio-icon" :class="{active: agreeFlag}" @click="radioAgree"></i>
        </span>
        <span class="txt">
          已同意并阅读
          <span class="link" v-for="(doc, index) in agrees[productType]" :key="index" @click="goDocuments(doc)">《{{doc}}》</span>
        </span>
      </div>
    </div>
    <confirm v-model="show" title="" @on-cancel="onCancel" @on-confirm="onConfirm">
      <p style="text-align:center;">您未绑定钱包地址,是否前去绑定?</p>
    </confirm>
  </div>
</template>
<script>
  import { XHeader, Confirm, Group, XSwitch, TransferDomDirective as TransferDom } from 'vux'
  import util from '../../service/util'
  import http from '../../service/http'
  import tips from '../../service/tips'
  export default {
    components: {
      XHeader,
      Confirm,
      Group,
      XSwitch,
    },
    directives: {
      focus: {
        inserted: function (el) {
          el.focus()
        }
      }
    },
    data() {
      return {
        amount: "",
        rate: "", //年回报率
        id: "",// 商品的id
        showTips: false,//显示支付密码弹框
        errTips: false,//显示支付错误弹框
        isPassWorld: false,//判断有没有支付密码
        noBalance: false,//余额不足
        agreeFlag: true,
        productType: 'ai', // 产品类型，根据不同的产品类型显示不同的协议书
        agrees: { // 定义不同产品遵守的协议书
          ai: ['投资风险协议书', '资产委托协议书', '智能投顾招募说明'],
          etf: ['投资风险协议书', '资产委托协议书'],
          ico: ['投资风险协议书', '资产委托协议书', 'ICO协议书'],
          btc: ['投资风险协议书', '资产委托协议书', 'BTC招募说明书摘要'],
          otc: ['投资风险协议书', '资产委托协议书']
        },
        // radioFlags: [true, false],
        radioFlags0: true,
        radioFlags1: false,
        type: "",
        money: "",
        detailBox: {},
        typebalance: "",
        showBanlance: "",
        walletList: [],
        show: false,
      }
    },
    mounted() {
      this.rate = this.$route.query.rate;
      this.id = this.$route.query.pid;
      this.type = this.$route.query.type;
      this.money = this.$route.query.money;
      this.balanceNum();
      this.getNews();
      this.getWallet();
    },
    methods: {
      onCancel() {
        this.show = false;
      },
      onConfirm() {
        this.$router.push({ path: '/main/addWallet' })
      },
      //判断有无钱包地址
      getWallet() {
        http.get("/user/address").then((res) => {
          if (res.data.status == 200) {
            this.walletList = res.data.body.length > 0 ? true : false;
          }
        })
      },
      // 校验余额
      balanceNum() {
        http.get("/order/enough?name=" + this.type).then((res) => {
          if (res.status == 200) {
            this.typebalance = res.data.body;
            if (this.money > res.data.body) {
              this.showBanlance = true;
              this.radioFlags0 = false;
              this.radioFlags1 = true;
            } else {
              this.showBanlance = false;
              this.radioFlags0 = true;
              this.radioFlags1 = false;
            }
          }
        })
      },
      backBtn() {
        history.back();
      },
      getNews() {
        http.get("/product/detail?pid=" + this.$route.query.pid).then((res) => {
          if (res.data.status == 200) {
            this.detailBox = res.data.body;
          }
        })
      },
      // 付款
      payOrder() {
        http.post("/coins/pay", {
          orderid: this.orderid
        }).then((resPay) => {
          if (resPay.data.status == 200) {
            var payType = 0;//余额支付
            if (this.radioFlags0) {
              var payType = 0;//余额支付
            } else {
              var payType = 1;//钱包支付
            }
            this.$router.push({ path: "orderPayment", query: { payType: payType, coin: this.type, payAmount: this.money, orderid: this.orderid } })
          } else {
            this.showTips = false;
            this.errTips = false;
            this.isPassWorld = false;
            this.pwd1 = ""
            this.pwd2 = ""
            this.pwd3 = ""
            this.pwd4 = ""
            this.pwd5 = ""
            this.pwd6 = ""
            // tips.tips(resPay.data.msg);
          }
        }).catch((resPay) => {
          this.showTips = false;
          this.errTips = false;
          this.isPassWorld = false;
          this.pwd1 = ""
          this.pwd2 = ""
          this.pwd3 = ""
          this.pwd4 = ""
          this.pwd5 = ""
          this.pwd6 = ""
          // tips.tips(resPay.data.msg);
        })
      },
      placeOrder() { //下单
        http.put('/order/newOrder', {
          payAmount: this.$route.query.money,
          pid: this.id,
          key: this.$route.query.type
        }).then((result) => {
          if (result.status == 200 && result.data.status == 200) {
            this.orderid = result.data.body.orderid;
            var payType = 0;//余额支付
            if (this.radioFlags0) {
              var payType = 0;//余额支付
            } else {
              var payType = 1;//钱包支付
            }
            this.$router.push({ path: "orderPayment", query: { payType: payType, coin: this.type, payAmount: this.money, orderid: this.orderid } })
          } else if (result.data.status == 402) {
            this.showTips = false;
            this.errTips = false;
            this.noBalance = true;
            this.pwd1 = ""
            this.pwd2 = ""
            this.pwd3 = ""
            this.pwd4 = ""
            this.pwd5 = ""
            this.pwd6 = ""
          } else {
            this.showTips = false;
            this.errTips = false;
            this.noBalance = false;
            this.pwd1 = ""
            this.pwd2 = ""
            this.pwd3 = ""
            this.pwd4 = ""
            this.pwd5 = ""
            this.pwd6 = ""
            tips.tips(result.data.msg)
          }
        }).catch((result) => {
          this.showTips = false;
          this.errTips = false;
          this.noBalance = false;
          this.pwd1 = ""
          this.pwd2 = ""
          this.pwd3 = ""
          this.pwd4 = ""
          this.pwd5 = ""
          this.pwd6 = ""
          tips.tips(result.data.msg)
        })
      },
      // 提交
      confimPay() {
        if (!(this.radioFlags0 || this.radioFlags1)) {
          tips.tips("请选择支付方式");
          return false;
        }
        if (!this.agreeFlag) {
          tips.tips("请同意协议");
          return false;
        }
        if (this.radioFlags1) {
          if (!this.walletList) {
            this.show = true;
            return false;
          }
        }
        this.placeOrder();
      },
      radioIcon(index) {
        if (index == 0) {
          this.radioFlags0 = !this.radioFlags0;
          this.radioFlags1 = false;
        } else {
          this.radioFlags0 = false;
          this.radioFlags1 = !this.radioFlags1;
        }
      },
      radioAgree() {
        this.agreeFlag = !this.agreeFlag
      },
      goDocuments(doc) {
        switch (doc) {
          case '投资风险协议书':
            // console.log('投资风险协议书')
            this.$router.push({ path: "/investmentRisk" })
            break;
          case '资产委托协议书':
            // console.log('资产委托协议书')
            this.$router.push({ path: "/assetDelegation" })
            break;
          case '智能投顾招募说明':
            // console.log('智能投顾招募说明')
            this.$router.push({ path: "/aiInstruction" })
            break;
          case 'ICO协议书':
            // console.log('ICO协议书')
            this.$router.push({ path: "/icoProtocol" })
            break;
          case 'BTC招募说明书摘要':
            // console.log('BTC招募说明书摘要')
            this.$router.push({ path: "/btcRecruit" })
            break;
          case 'ETH招募说明':
            this.$router.push({ path: "/ethAgreement" })
            break;
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .paycoin{
    position: fixed;
    top:0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: #f6f6f6 !important
  }

  .paycoin .vux-header {
    position: relative;
    padding: 3px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: linear-gradient(left, #fedb30, #fea00b) !important;
    background: -webkit-gradient(linear, left top, right top, from(#fedb30), to(#fea00b)) !important;
  }

  .paycoin .c3 {
    color: #333;
  }

  .paycoin .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #fff;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .paycoin .card-wrap {
    margin-top: 0.71rem;
    background-color: #ffffff;
    margin-bottom: 40px;
    padding: 3rem 1.07rem;
    .card+.card {
      margin-top: 2.14rem;
    }
    .card {
      color: #333333;
      text-align: center;
      border-radius: 24px;
      box-shadow: 2px 2px 34px -7px #00000078;
      .title {
        padding: 0.71rem 0;
        box-shadow: 0 1px 0 0 #EFEFEF;
      }
      .content {
        padding: 1.07rem;
        .prompt {
          display: block;
          color: #FF1010;
          width: 84%;
          margin: 20px auto 40px auto;
          font-size: 0.92rem;
        }
        .address-code {
          box-shadow: inset 0 0 10px 0 rgba(220, 220, 220, 0.50);
          border-radius: 6px;
          padding: 0.28rem 0;
          font-size: 0.92rem;
        }
        .qrcode {
          margin: 20px 0;
        }
        .copy-wrap {
          margin-bottom: 10px;
          &>* {
            padding: 0.42rem 2rem;
            border-radius: 2rem;
            border: 1px solid #FEA620;
            color: #FEA620;
            display: inline-block;
          }
        }
      }
      .qrcode {
        width: 30vw;
        height: 30vw;
        max-width: 250px;
        max-height: 250px;
      }
    }
  }

  .paycoin .app-bot-btn {
    margin-top: 40px;
    margin-bottom: 10px;
    /* padding: 0 1.42rem; */
    >* {
      display: block;
      background-image: linear-gradient(-135deg, #FEDF33 0%, #FE9D09 100%);
      box-shadow: 0 0 3px 1px rgba(254, 215, 46, 0.50);
      border-radius: 1rem;
      color: #ffffff;
      text-align: center;
      font-size: 1.57rem;
      height: 40px;
      line-height:40px;
      /* padding: 0.57rem 0; */
    }
  }

  .paycoin .agree-wrap {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 20px auto 30px auto;
    .radio-icon {
      margin-right: 0.5em;
      margin-top: 0.1em;
    }
    .txt {
      color: #666666;
      font-size: 13px;
      .link {
        color: #1b94f5;
      }
    }
  }

  .paycoin .radio-icon {
    display: inline-block;
    border: 1px solid #d8d7d7;
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 50%;
    position: relative;
    &.active {
      border-color: #FEA620;
      &:after {
        display: inline-block;
        width: 0.85rem;
        height: 0.85rem;
        content: '';
        background-color: #FEA620;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        border-radius: 50%;
      }
    }
  }

  .paycoin .cell-group+.cell-group {
    margin-top: 0.71rem;
  }

  .paycoin .cell-group {
    background-color: #ffffff;
    .cell {
      display: flex;
      justify-content: space-between;
      height: 50px;
      line-height: 50px;
      padding: 0px 10px;
      .left,
      .right {
        display: flex;
        align-items: center;
      }
      .left {
        color: #333333;
        &.title {
          color: #999999;
          margin-top: 0.35rem;
        }
        .icon-w-fix {
          width: 42px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 0.5rem;
        }
      }
      .right {
        color: #FEA620;
        &.amount {
          color: #999999;
        }
      }
    }
  }

  .paycoin .broadcast-wrap {
    /* padding: 1.07rem 1.42rem; */
    position: relative;
    &:after {
      height: 50%;
      display: block;
      content: '';
      position: absolute;
      width: 100%;
      background-color: #ffffff;
      bottom: 0;
      left: 0;
    }
    .panel {
      /* padding: 0.57rem; */
      background-color: #ffffff;
      /* border-radius: 12px; */
      box-shadow: 0px 2px 46px -3px #0000002e;
      position: relative;
      z-index: 99;
      color: #FFB818;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90%;
      left: 5%;
      /* border: 1px solid #ccc; */
      box-shadow: 1px 1px 1px #ccc;
      top: -15px;
      height: 30px;
      line-height: 30px;
      border-radius: 8px;
      .broadcast-icon {
        margin-right: 0.5rem;
      }
    }
  }


  .paycoin .broadcast-icon,
  .paycoin .purse-icon,
  .paycoin .union-icon {
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
  }

  .paycoin .broadcast-icon {
    width: 1em;
    height: 1em;
    background-image: url("../../../static/images/common/broadcast.png");
  }

  .paycoin .purse-icon {
    width: 22px;
    height: 22px;
    background-image: url("../../../static/images/common/purse.png");
  }

  .paycoin .union-icon {
    width: 42px;
    height: 22px;
    background-image: url("../../../static/images/common/union.png");
  }

  .paycoin .tips {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    z-index: 999;
    .tips-top {
      position: absolute;
      top: 40%;
      height: 60%;
      background: #fff;
      width: 100%;
      border-bottom: 1px solid #f6f6f6;
      img {
        position: absolute;
        left: 15px;
        top: 15px;
      }
    }
  }

  .paycoin .tips-center {
    padding-left: 10%;
    margin-top: 45px;
  }

  .paycoin .tips-center li {
    float: left;
    width: 15%;
    list-style: none;
    height: 45px;
    line-height: 45px;
    border: 1px solid #ccc;
    border-right: none;
    overflow: hidden;
    text-align: center;
    input {
      border: none;
      outline: none;
      height: 45px;
      line-height: 45px;
      width: 100%;
      display: block;
      text-align: center;
    }
  }

  .paycoin .tips-center li:last-child {
    border-right: 1px solid #ccc;
  }

  .paycoin .forgetPassWord {
    position: absolute;
    right: 28px;
    top: 150px;
    color: #fea620;
  }

  .paycoin .errTips {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .paycoin .errTipsBox {
    position: absolute;
    top: 40%;
    width: 90%;
    height: 130px;
    background: #fff;
    margin-left: 5%;
    border-radius: 15px;
    .errTips-top {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #efefef;
    }
    .errTipsBtn {
      span {
        display: inline-block;
        width: 48%;
        text-align: center;
        margin-top: 15px;
        color: #fea620;
      }
      .active {
        border-right: 1px solid #efefef;
      }
    }
  }

  .paycoin .setPassWorldTips {
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .paycoin .setPasswordText {
    position: absolute;
    top: 40%;
    height: 130px;
    background: #fff;
    width: 90%;
    margin-left: 5%;
    border-radius: 15px;
    .setPassWorldTitle {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid #efefef;
      color: #000;
    }
    .goPassworld {
      height: 70px;
      line-height: 65px;
      color: #fea620;
      text-align: center;
    }
  }

  .paycoin .noBalance {
    position: fixed;
    background: rgba(0, 0, 0, 0.3);
    top: 40%;
    height: 125px;
    width: 70%;
    text-align: center;
    color: #fff;
    color: #fff;
  }

  .paycoin .closeBtn {
    background: #fff;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 50%;
  }

  .paycoin .rechargeBalance {
    width: 70%;
    height: 30px;
    line-height: 30px;
    background: #fff;
    color: #333;
    margin-left: 15%;
    border-radius: 15px;
    margin-top: 10px
  }

  .navBtn {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 888;
    transform: rotate(180deg);
  }
</style>